import React from 'react';
import { Form, Input, Button, Checkbox, Tabs, Row, Col } from 'antd';
import {Link} from 'react-router-dom'
import  './style.scss';
import { Footer } from 'antd/lib/layout/layout';

const onFinish = (values) => {
  console.log('Received values of form: ', values);
};
export default function Register() {
  return (
    <div className={'bg'}>
      {/* <div className={'heard'}>
        <div className={'cloud'}>
          <img src="../logo.png" alt="logo" />
        </div>
        <h1 className={styles.title}>系统名称</h1>
      </div> */}
      <div className={'login_card'}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="phone"
            rules={[{ required: true, message: '请输入手机号!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input placeholder="请输入手机号" bordered={false} />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[{ required: true, message: '请输入验证码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Row>
              <Col span={18}>
                <Input
                  bordered={false}
                  type="password"
                  placeholder="请输入验证码"
                />
              </Col>
              <Col span={6} style={{ float: 'right' }}>
                <Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请设置密码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input
              bordered={false}
              type="password"
              placeholder="请设置密码"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请重复密码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input
              bordered={false}
              type="password"
              placeholder="请重复密码"
            />
          </Form.Item>

          <Form.Item>
            {/* 已有帐号，<a href="#">点击登录</a> */}
            已有帐号，<Link to={'/login'}>点击登录 </Link>

          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
              登录
            </Button>
          </Form.Item>
          <Form.Item name="" valuePropName="checked" style={{ textAlign: 'left' }}>
            <Checkbox style={{ color: '#CCCCCC' }}>我已阅读并同意《<a>用户服务协议</a>》</Checkbox>
          </Form.Item>
          {/* <Button size="large" shape="circle"><img src="../weixin.png" alt="微信图片" /></Button> */}

        </Form>
      </div>
{/* 
      <Footer className={styles.footer}>
        <text>
          底部说明
        </text>
      </Footer> */}
    </div>
  );
}
